<template>
	<view class="superwei-combox" :class="border ? '' : 'superwei-combox__no-border'">
		<view v-if="label" class="superwei-combox__label" :style="labelStyle">
			<text>{{ label }}</text>
		</view>
		<view class="superwei-combox__input-box">
			<input class="superwei-combox__input" type="text" disabled @click="toggleSelector"
				:placeholder="placeholder" placeholder-class="superwei-combox__input-plac" v-model="inputVal"
				@input="onInput" @focus="onFocus" @blur="onBlur" />
			<uni-icons :type="showSelector ? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector">
			</uni-icons>
		</view>
		<view class="dialog-cover" v-if="showSelector" @click="handleClose"></view>
		<view class="superwei-combox__selector" :class="showType.length > 0 ? 'addWidth' : ''" v-if="showSelector">
			<view class="uni-popper__arrow"></view>
			<view class="h-table">
				<view class="h-tr h-tr-2 h-thead">
					<view class="h-td h-td-colspan h-td-rowspan">
						<input class="search-input" :placeholder="$t('pageTranslation.pleaseEnterThe')"
							placeholder-style="font-size:14rpx" v-model="locationInput">
					</view>
				</view>
				<view class="h-tr h-tr-2 h-thead ">
					<view class="h-td">{{ $t('JsInternational.volumnStockName') }}</view>
					<view class="h-td">{{ $t('JsInternational.volumnStockOf') }}</view>
				</view>
				<view :style="'height: 300rpx;overflow-y: auto;'">
					<block v-for="(x, i) in list" :key="i">
						<view class="h-tr h-tr-2" @click="getClickItem(x)" v-if="x.calculateVolume >= 0">
							<view class="h-td">{{ x.locationCode }}</view>
							<view class="h-td">{{ x.calculateVolume }}</view>
						</view>
					</block>
				</view>
			</view>
			<view class="table-footer">
				<view class="table-info">
					<view class="uni-pagination__btn" :class="currentIndex === 1 ? 'uni-pagination--disabled' : ''"
						@click="pageUp">
						<uni-icons color="#666" size="16" type="left" />
					</view>
					<text> <text class="text-color">{{ currentIndex }}</text>/{{ maxPage }}</text>
					<view class="uni-pagination__btn" :class="currentIndex >= maxPage ? 'uni-pagination--disabled' : ''"
						@click="nextPage">
						<uni-icons color="#666" size="16" type="right" />
					</view>
				</view>
				<view class="uni-pagination__btn" @click="rest">
					<uni-icons color="#666" size="16" type="refreshempty" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	locationRequest
} from '@/api/api.js'
import {
	toRaw
} from 'vue';
/**
 * Combox 组合输入框
 * @description 组合输入框一般用于既可以输入也可以选择的场景
 * @property {String} label 左侧文字
 * @property {String} labelWidth 左侧内容宽度
 * @property {String} placeholder 输入框占位符
 * @property {String} value 组合框的值
 * @property {String} selectedBackground 选中项背景颜色
 * @property {String} selectedColor 选中项文字颜色
 * @property {String} keyName json数组显示的字段值
 * @property {String} showType 右标题
 * @property {Bool} requestBool 是否直接请求的标识
 * @property {Object} locationList 来料入库的库位标识
 *  @property {Object} ignoreLocationCode 前端算满的库位
 * 
 */
export default {
	name: 'superweiCombox',
	emits: ['input', 'update:modelValue', 'select', 'setClick'],
	props: {
		locationList: {
			type: Object,
			default() {
				return []
			}
		},
		keyName: {
			type: String,
			default: ''
		},
		showType: {
			type: String,
			default: ''
		},
		selectedBackground: {
			type: String,
			default: '#f5f7fa'
		},
		selectedColor: {
			type: String,
			default: '#409eff'
		},
		border: {
			type: Boolean,
			default: true
		},
		label: {
			type: String,
			default: ''
		},
		labelWidth: {
			type: String,
			default: 'auto'
		},
		placeholder: {
			type: String,
			default: ''
		},
		requestParam: {
			type: Object,
			default() {
				return {}
			}
		},
		requestUrl: {
			type: String,
			default: '',
		},
		requestBool: {
			type: Boolean,
			default: true
		},
		ignoreLocationCode: {
			type: Object,
			default() {
				return []
			}
		},
		// 大料入库 库位为0 也显示
		aniseed: {
			type: Boolean,
			default: false
		},
		// {
		// 	locationCode:'', //库位code
		// 	surplusCapacity:0, //后端告诉前端容量
		// 	barcodeList:[], //当前库位本次扫描绑定的barcode条码集合
		// 	currentCapacity:0, //后端容量减去本次扫描绑定条码的剩余容量  前端预算容量
		// }
		locationUseList: {
			type: Object,
			default() {
				return []
			}
		},
		// #ifndef VUE3
		value: {
			type: [String, Number],
			default: ''
		},
		// #endif
		// #ifdef VUE3
		modelValue: {
			type: [String, Number],
			default: ''
		},
		// #endif
		// #ifdef VUE3
		defaultModelValue: {
			type: [String, Number],
			default: ''
		},
		// #endif
	},
	data() {
		return {
			isInput: false,
			showSelector: false,
			inputVal: '',
			isClick: false,
			currentIndex: 1,
			rows: 10,
			list: [],
			scanBarCodeCount: {}, //扫描的某个库位条码数
			total: 0,
			locationInput: '',
			timer: '',
		}
	},
	computed: {
		labelStyle() {
			if (this.labelWidth === 'auto') {
				return ""
			}
			return `width: ${this.labelWidth}`
		},
		maxPage() {
			return Math.ceil(this.total / this.rows);
		}
	},

	mounted() {
		const that = this
		uni.$on('reduceInventoryCount', (data) => {
			that.scanBarCodeCount = data
		})
	},
	watch: {
		// #ifndef VUE3
		value: {
			handler(newVal) {
				this.inputVal = newVal
				this.isInput = true
			},
			immediate: true
		},
		// #endif
		// #ifdef VUE3
		modelValue: {
			handler(newVal) {
				this.inputVal = newVal
				this.isInput = true
			},
			immediate: true
		},
		// #endif
		// #ifdef VUE3
		defaultModelValue: {
			handler(newVal) {
				this.inputVal = ''
				this.isInput = true
			},
			// immediate: true
		},
		// #endif
		locationInput: {
			handler(newVal) {
				console.log(newVal)
				if (this.timer) {
					clearTimeout(this.timer)
				}
				this.timer = setTimeout(() => {
					this.changeMachine()
				}, 1000)
			},
			immediate: true
		},
		requestUrl: {
			handler(newVal) {
				this.inputVal = '';
				this.$emit('setClick', {});
				this.locationInput = ''
			},
			// immediate: true
		}
	},
	methods: {
		// 初始化重置数据
		restInitData() {
			this.inputVal = ''
			this.isInput = true
		},
		getClickItem(x) {
			this.inputVal = x.locationCode;
			this.$emit('setClick', x);
			this.showSelector = false;
			this.locationInput = ''
		},
		changeMachine() {
			this.locationRequestFn()
		},
		// 重置
		rest() {
			this.locationInput = ''
			this.currentIndex = 1
			this.locationRequestFn()
		},
		// 上一页
		pageUp() {
			if (this.currentIndex == 1) return;
			this.currentIndex--
			this.locationRequestFn()
		},
		// 下一页
		nextPage() {
			if (this.currentIndex >= this.maxPage) return;
			this.currentIndex++
			this.locationRequestFn()
		},
		// 请求库位信息
		locationRequestFn() {
			if (!this.requestUrl || !this.requestBool) return;
			locationRequest(this.requestUrl, {
				...this.requestParam,
				current: this.currentIndex,
				size: this.rows,
				locationCode: this.locationInput,
				ignoreLocationCode: this.ignoreLocationCode
			}).then(res => {
				if (res.code == 0) {
					if (this.locationList.length) { //来料入库的判断
						this.list = this.locationList
						this.total = this.locationList.length;
						this.originList = this.locationList; //原始数据
					}
					else {
						this.list = res.data.records;
						this.total = res.data.total;
						this.originList = res.data.records; //原始数据
					}
					this.locationCalculate()
					const that = this
					if (JSON.stringify(that.scanBarCodeCount) != "{}") {
						that.list.forEach(e => {
							if (e.locationCode == that.scanBarCodeCount.locationId) {
								e.calculateVolume = e.calculateVolume - that.scanBarCodeCount.count
							}
						})
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})
		},
		//库位计算逻辑
		locationCalculate() {
			this.list.forEach(x => {
				let arry = this.locationUseList.filter(k => x.locationCode == k.locationCode)
				// console.log(arry)
				if (arry.length) {
					x.calculateVolume = x.maxCapacity - x.usedCapacity - arry[0].barcodeList.length
				} else {
					if (this.aniseed) {
						x.calculateVolume = x.maxCapacity - x.usedCapacity
					} else {
						if (x.maxCapacity - x.usedCapacity) {
							x.calculateVolume = x.maxCapacity - x.usedCapacity
						}
					}
					// 判断库位容量是否大于0

				}
			})
			// console.log(this.list, 'this.listthis.list');
		},
		handleClose() {
			this.showSelector = false
			this.locationInput = ''
		},
		toggleSelector() {
			this.showSelector = !this.showSelector
			this.isInput = false
			if (this.showSelector) {
				this.currentIndex = 1
				this.locationRequestFn()
			}
		},
		onFocus() {
			this.showSelector = true
			this.isInput = false
			this.currentIndex = 1
			this.locationRequestFn()
		},
		onBlur(e) {
			setTimeout(() => {
				this.isInput = false
				this.isClick = false
			}, 153)
		},
		onInput() {
			setTimeout(() => {
				this.$emit('input', this.inputVal)
				this.$emit('update:modelValue', this.inputVal)
			})
		}
	}
}
</script>

<style lang="scss" scoped>
@media only screen and (max-width: 999px) {

	/* 针对手机： */
	.superwei-combox {
		font-size: 14px;
		border: 0px solid #12b7f5;
		border-radius: 4px;
		padding: 6px 10px;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		// height: 40px;
		flex-direction: row;
		align-items: center;
		// border-bottom: solid 1px #DDDDDD;
	}

}

@media only screen and (min-width: 1000px) {

	/* 针对手机： */
	.superwei-combox {
		font-size: 14px;
		border: 2px solid #12b7f5;
		border-radius: 4px;
		padding: 6px 10px;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		// height: 40px;
		flex-direction: row;
		align-items: center;
		// border-bottom: solid 1px #DDDDDD;
	}

}

.superwei-combox__label {
	font-size: 16px;
	line-height: 22px;
	padding-right: 10px;
	color: #999999;
}

.superwei-combox__input-box {
	position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex: 1;
	flex-direction: row;
	align-items: center;
}

.superwei-combox__input {
	flex: 1;
	font-size: 14px;
	height: 22px;
	line-height: 22px;
	margin-right: 12rpx;
}

.superwei-combox__input-plac {
	font-size: 14px;
	color: #ccc; //placeholder-style="color:#FFFFFF"
}

.superwei-combox__selector {
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	/* #endif */
	position: absolute;
	top: calc(100% + 12px);
	left: -24rpx;
	right: -24rpx;
	// width: 100%;
	background-color: #FFFFFF;
	border: 1px solid #EBEEF5;
	border-radius: 6px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	z-index: 702;
	padding: 4px 4px;
}

.addWidth {
	width: 120% !important;
	left: -20% !important;
}


// picker 弹出层通用的指示小三角
.uni-popper__arrow,
.uni-popper__arrow::after {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 6px;
}

.uni-popper__arrow {
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
	top: -6px;
	left: 10%;
	margin-right: 3px;
	border-top-width: 0;
	border-bottom-color: #EBEEF5;
}

.uni-popper__arrow::after {
	content: " ";
	top: 1px;
	margin-left: -6px;
	border-top-width: 0;
	border-bottom-color: #fff;
}

.superwei-combox__no-border {
	border: none;
}

.table-footer {
	margin-top: 10rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.uni-pagination__btn {
	/* #ifndef APP-NVUE */
	display: flex;
	cursor: pointer;
	/* #endif */
	padding: 0 8px;
	line-height: 30px;
	font-size: 12px;
	position: relative;
	background-color: #F0F0F0;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-radius: 5px;
}

.uni-pagination--disabled {
	opacity: 0.5;
	/* #ifdef H5 */
	cursor: default;
	/* #endif */
}

.text-color {
	color: #007aff;
}

.table-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 80%;
}

.dialog-cover {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0);
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	z-index: 100;
}

.search-input {
	text-align: left;
	width: 80%;
	height: 80%;
	background-color: #fff;
	border-radius: 12rpx;
	color: #666;
	padding: 0 20rpx;
}
</style>
